<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="举报ID或被举报ID"
      />

      <el-select
        v-model="listQuery.gender"
        clearable
        placeholder="被举报性别"
      >
        <el-option
          v-for="option in genderOptions"
          :key="option.value"
          :label="option.name"
          :value="option.value"
        />
      </el-select>

      <el-select
        v-model="listQuery.entranceType"
        clearable
        placeholder="举报场景"
      >
        <el-option
          v-for="option in entranceOptions"
          :key="option.value"
          :label="option.name"
          :value="option.value"
        />
      </el-select>

      <el-select
        v-model="listQuery.reportType"
        clearable
        placeholder="举报类型"
      >
        <el-option
          v-for="option in reportOptions"
          :key="option.value"
          :label="option.text"
          :value="option.value"
        />
      </el-select>
      <el-select
        v-model="listQuery.reportStatus"
        clearable
        placeholder="状态"
      >
        <el-option
          v-for="option in resultStatus"
          :key="option.value"
          :label="option.text"
          :value="option.value"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="被举报ID"
          prop="targetId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.targetId" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="被举报人昵称"
          prop="targetName"
        />

        <el-table-column
          align="center"
          label="被举报用户性别"
        >
          <template slot-scope="{row}">{{ row.gender | gender }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="举报人ID"
          prop="userId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="举报人昵称"
          prop="userName"
        />

        <el-table-column
          align="center"
          label="举报场景"
        >
          <template slot-scope="{row}">{{ entranceOptions[row.entranceType] && entranceOptions[row.entranceType].name }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="举报原因"
        >
          <template slot-scope="{row}">{{ row.reportType | filterType }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="举报内容"
        >
          <template slot-scope="{row}">{{ row.reason }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="举报图片"
          min-width="150"
        >
          <template v-if="row.photos && row.photos.length" slot-scope="{row}">
            <ul class="photos-list">
              <img
                v-for="(item, index) in row.photos"
                :key="item + index"
                :src="item"
                width="100"
                style="cursor:pointer"
                title="点击放大"
                @click="zoomImage(item)"
              >
            </ul>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="创建时间"
          width="150"
        >
          <template slot-scope="{row}">{{ row.createAt }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="{row}">{{ row.reportStatus | filterStatus }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="回复内容"
        >
          <template slot-scope="{row}">{{ row.reply }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="row.reportStatus === 0"
              type="danger"
              size="mini"
              @click="onHandleReport(row)"
            >处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>

    <el-dialog :title="`被举报ID：${curRow && curRow.targetId}`" :visible.sync="dialogReportVisible">
      <el-form ref="formdata" :rules="rules" :model="form">
        <el-form-item label="状态:" label-width="60" prop="reportStatus">
          <el-select
            v-model="form.reportStatus"
            clearable
            placeholder=""
          >
            <el-option
              v-for="(option, index) in resultStatus"
              :key="option.value + index"
              :label="option.text"
              :value="option.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="回复:" label-width="60" prop="reply">
          <el-input v-model="form.reply" :rows="5" type="textarea" auto-complete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="openForbidDialog">封号</el-button>
        <el-button @click="dialogReportVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleReportResult">确 定</el-button>
      </div>
    </el-dialog>

    <DialogForbidAccount
      :visible.sync="dialogVisible"
      :user-ids="forbidAccounts"
      :forbid-type="'0'"
      @onSuccess="doSearch"
    />

    <ImageViewer
      :visible.sync="showImage"
      :url="imageUrl"
    />
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import DialogForbidAccount from './components/DialogForbidAccount'
import ImageViewer from '@/components/ImageViewer'

import { xhrReportList, xhrHandleReport } from '@api/account'
const resultStatus = {
  0: '正在处理中',
  1: '处理完成，暂未违规',
  2: '处理完成，管理后台填写了反馈建议'
}
export default {
  name: 'AccuseList',
  components: { TablePagination, DialogForbidAccount, ImageViewer },
  filters: {
    filterType(typeArr) {
      return typeArr.reduce((pre, type) => {
        const cur = findType(type)
        return pre + cur + ','
      }, '').slice(0, -1)
      function findType(value) {
        return [
          { value: 0, text: '广告骚扰' },
          { value: 1, text: '淫秽色情' },
          { value: 2, text: '攻击谩骂' },
          { value: 3, text: '虚假信息' },
          { value: 4, text: '诈骗' },
          { value: 5, text: '政治敏感' },
          { value: 6, text: '黑屏幕不露脸' },
          { value: -1, text: '用户自定义' }
        ].find((i) => i.value === value).text
      }
    },
    filterStatus(status) {
      return resultStatus[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      daterangeValue: '',
      listQuery: {
        page: 1,
        limit: 100,
        userId: null,
        reportStatus: null,
        reportType: null,
        startTime: null,
        endTime: null,
        gender: null,
        entranceType: null
      },
      form: {
        reportStatus: null,
        reply: null
      },
      rules: {
        reportStatus: [{ required: true, message: '不能为空' }],
        reply: [{ required: true, message: '不能为空' }]
      },
      resultStatus: [
        { value: 0, text: '正在处理中' },
        { value: 1, text: '处理完成，暂未违规' },
        { value: 2, text: '处理完成，管理后台填写了反馈建议' }
      ],
      curRow: null,
      showImage: false,
      imageUrl: null,
      listLoading: true,
      dialogVisible: false,
      dialogReportVisible: false,
      forbidAccounts: '',
      reportOptions: [
        { value: 0, text: '广告骚扰' },
        { value: 1, text: '淫秽色情' },
        { value: 2, text: '攻击谩骂' },
        { value: 3, text: '虚假信息' },
        { value: 4, text: '诈骗' },
        { value: 5, text: '政治敏感' },
        { value: 6, text: '主播黑屏不露脸' },
        { value: -1, text: '用户自定义' } // 0、广告骚扰 1、淫秽色情 2、攻击谩骂 3、虚假信息 4、诈骗 5、政治敏感, -1为用户自定义"其他
      ],
      genderOptions: [
        { value: 1, name: '男' },
        { value: 2, name: '女' },
        { value: 0, name: '未知' }
      ],
      entranceOptions: [
        { value: 0, name: 'IM聊天页面举报' },
        { value: 1, name: '用户主页举报' },
        { value: 2, name: '动态举报' },
        { value: 3, name: '视频聊天举报' }
      ]
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      if (this.listQuery.userId && !/^\d*$/.test(this.listQuery.userId)) {
        this.$message.warning('用户ID只能是数字')
        this.listLoading = false
        return
      }
      xhrReportList(this.listQuery)
        .then(resp => {
          this.list = resp.data.list
          this.total = resp.data.total
          this.listLoading = false
        })
        .catch(err => {
          this.$message.error(err)
          this.listLoading = false
        })
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    },
    onHandleReport(row) {
      this.curRow = Object.assign({}, row)
      this.dialogReportVisible = true
    },
    handleReportResult() {
      this.$refs.formdata.validate(valid => {
        if (valid) {
          const params = Object.assign(this.form, { id: this.curRow.id, targetId: this.curRow.targetId, type: 0 })
          xhrHandleReport(params).then(resp => {
            this.$refs.formdata.resetFields()
            this.$message.success('处理成功！')
            this.doSearch()
            this.dialogReportVisible = false
          }).catch(err => this.$message.error(err))
        }
      })
    },
    openForbidDialog() {
      this.forbidAccounts = this.curRow.targetId
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.photos-list {
  display: flex;
  flex-wrap: wrap;
  img{
      width: 100px;
      margin-bottom: 10px;
  }
}
</style>
